<template>
  <f7-page>
    <f7-navbar :title="title" back-link="返回"></f7-navbar>
    <custom-calender
      v-model="showCalender"
      :min-date="minDate"
      :default-date="defaultDate"
      type="range"
      @confirm="handleConfirm"
      @search="init"
    ></custom-calender>
    <div class="content-padding">
      <div class="yeji-item main-linear-bg" v-if="!type">
        <div>
          <span>小区新增业绩</span>
        </div>
        <img class="center-line" src="../assets/wd_007.png" alt="">
        <div>
          <img src="../assets/cc_002.png" alt="">
          <h2>{{yejiInfo.today_min || 0}}</h2>
        </div>
      </div>
      <div class="yeji-item main-linear-bg">
        <div>
          <span>{{totalCardTitle}}</span>
        </div>
        <img class="center-line" src="../assets/wd_007.png" alt="">
        <div>
          <img src="../assets/cc_002.png" alt="">
          <h2>{{total || 0}}</h2>
        </div>
      </div>
      <div class="yeji-item main-linear-bg" v-if="!type">
        <div>
          <span>小区新增人数</span>
        </div>
        <img class="center-line" src="../assets/wd_007.png" alt="">
        <div>
<!--          <img src="../assets/cc_002.png" alt="">-->
          <h2>{{yejiInfo.today_user || 0}}</h2>
        </div>
      </div>
    </div>
  </f7-page>
</template>

<script>
  import { seachYeji } from "../api/my";

  export default {
    name: "community-performance-inquiry",
    data() {
      return {
        showCalender: false,
        minDate: new Date(2020,0,1),
        defaultDate: [new Date(), new Date()],
        yejiInfo: {},
      }
    },
    computed: {
      type() {
        return this.$f7route.query.type;
      },
      title() {
        if(!this.type) return '小区新增业绩'
        else if(this.type === '1') return '大区新增业绩'
        else return '团队新增业绩'
      },
      totalCardTitle() {
        if(!this.type) return '小区总业绩'
        return '总业绩'
      },
      total() {
        if(!this.type) return this.yejiInfo.min
        return !this.type ? this.yejiInfo.min : this.type === '1' ? this.yejiInfo.max: this.yejiInfo.total
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init(dates = []) {
        seachYeji({begin: dates[0],last: dates[1]}, this.$f7route.query.type).then(res => {
          this.yejiInfo =  res.data;
        })
      },
      handleConfirm(date) {
        this.showCalender = false;
      },
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: 50px;
  }
  .yeji-item {
    display: flex;
    color: $fontColor;
    height: 180px;
    align-items: center;
    border-radius: $radius;
    position: relative;
    margin-bottom: $padding;
    .center-line {
      width: auto;
      height: 80%;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
    > div {
      flex: 1;
      text-align: center;
      &:first-child {
        text-align: center;
        span {
          display: inline-block;
          padding: 5px 30px;
          border: 1px solid $fontColor;
          border-radius:24px;
          font-size: 22px;
        }
      }
    }

    > div:last-child {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      img {
        margin-right: 10px;
        width: 30px;
        height: 30px;
      }
      h2 {
        font-size: 50px;
      }
    }
  }
</style>